<template>
  <van-popup v-model="isShow" round position="bottom" @close="closePop">
    <div class="agree_pop">
      <div class="pop_cont">
        <div class="wisdom_tree_box">
          <div class="item-tree">
            <img :src="collectInfo.avatar" alt="" class="head_portrait" />
            <div class="tree-info">
              <div class="nickname">{{ collectInfo.id }}</div>
              <div class="time">
                {{ convertTimestampToDateTime(collectInfo.time) }}
              </div>
              <div class="content">
                {{ collectInfo.content }}
              </div>
              <div class="img_box">
                <img
                  :src="item.img"
                  alt=""
                  v-for="(item, index) in collectInfo.fruitImg"
                  :key="index"
                  class="user_img"
                />
              </div>
              <div class="play_box dis_flex" v-if="collectInfo.file">
                <img
                  src="@/assets/images/home/deliver_play_icon.png"
                  alt=""
                  class="play_icon"
                  @click="playAudio"
                  v-if="isPlaying"
                />
                <img
                  src="@/assets/images/home/deliver_pause_icon.png"
                  alt=""
                  class="play_icon"
                  @click="playAudio"
                  v-else
                />
                <div class="line"></div>
                <div class="progress_bar">
                  <div
                    class="file_bar"
                    :style="{ width: progress + '%' }"
                  ></div>
                  <div
                    class="sliding_block"
                    :style="{ left: progress + '%' }"
                  ></div>
                </div>
                <div class="progress_time">
                  {{ formatAudioTime(totalDuration) }}
                </div>
              </div>

              <div class="operation_box dis_flex justify_center">
                <div class="info_item dis_flex">
                  <img src="@/assets/images/home/collect.png" alt="" />
                  <span>{{ collectInfo.collect_num || 0 }}人收取过</span>
                </div>
                <div class="info_item dis_flex">
                  <img src="@/assets/images/home/like.png" alt="" />
                  <span>点赞{{ collectInfo.like_num || 0 }}次</span>
                </div>
                <div class="info_item dis_flex">
                  <img src="@/assets/images/home/comment.png" alt="" />
                  <span>{{ collectInfo.comment_num || 0 }}条评论</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="boundary"></div>
        <!-- 评论 -->
        <div class="comment_box">
          <div class="comment_num">
            评论（共{{ collectInfo.comment_num || 0 }}条）
          </div>
          <div class="comment_list">
            <div
              v-for="(item, index) in collectInfo.fruitComment"
              :key="index"
              class="item_comment"
            >
              <img src="" alt="" class="comment_img" />
              <div class="comment_info">
                <div class="comment_name">{{ item.nickname }}</div>
                <div class="comment_txt">
                  {{ item.content }}
                </div>
                <div class="comment_time">
                  {{ convertTimestampToDateTime(item.time) }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="no_data_txt">- 暂无更多评论 -</div>
      </div>
      <!-- 底部操作 -->
      <div class="footer_operate">
        <input
          type="text"
          v-model="commentText"
          placeholder="参与回复"
          @keyup.enter="handleSend"
        />

        <div class="num_info">
          <div class="apple">
            <img
              src="@/assets/images/function/like.png"
              alt=""
              v-if="collectInfo.is_like == 1"
              @click="toLike(1)"
            />
            <img
              src="@/assets/images/function/no_like.png"
              alt=""
              v-else
              @click="toLike(0)"
            />
            <div>点赞</div>
          </div>
          <div @click="closePop">
            <img src="@/assets/images/function/no_throw_back.png" alt="" />
            <div>扔回</div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import {
  getAudioDuration,
  formatAudioTime,
  setupAudioInstance,
} from "@/utils/wisdomTree";
import { convertTimestampToDateTime } from "@/utils/time.js";
import { collectComment, toCollectLike } from "@/api/funcation/wisdomTree";
export default {
  props: {
    collectInfo: {
      type: Object,
    },
  },
  data() {
    return {
      isPlaying: false,
      isShow: true,
      commentText: "",
      audioInstance: null,
      totalDuration: 0,
      progress: 0,
    };
  },
  async mounted() {
    if (this.collectInfo.file) {
      this.audioInstance = new Audio(this.collectInfo.file);
      setupAudioInstance(this.audioInstance, this);
      this.totalDuration = await getAudioDuration(this.collectInfo.file);
    }
  },
  methods: {
    formatAudioTime,
    convertTimestampToDateTime,
    playAudio() {
      if (this.audioInstance && this.collectInfo.file) {
        if (this.audioInstance.paused) {
          this.audioInstance.play();
          this.isPlaying = true;
        } else {
          this.audioInstance.pause();
          this.isPlaying = false;
        }
      }
    },
    async handleSend(e) {
      let par = {
        id: this.collectInfo.id,
        content: e.target.value,
      };
      await collectComment(par);
    },
    // 点赞
    async toLike(val) {
      let par = {
        id: this.collectInfo.id,
        status: val == 1 ? 0 : 1,
      };
      let res = await toCollectLike(par);
      if (res.code == 200) {
        this.collectInfo.is_like = val == 1 ? 0 : 1;
      }
    },
    closePop() {
      this.$emit("toColsePop", 1);
    },
  },
};
</script>

<style scoped lang="less">
.dis_flex {
  display: flex;
  align-items: center;
}

.justify_center {
  justify-content: space-between;
}

.agree_pop {
  height: 60%;
}

.pop_cont {
  height: 520px;
  margin-bottom: 70px;
  overflow: hidden;
  overflow-y: scroll;
}

.boundary {
  height: 0.33px;
  opacity: 0.2;
  margin: 0 20px;
  border-bottom: 0.33px solid #333333;
}

.wisdom_tree_box .item-tree {
  display: flex;
  background-color: #ffffff;
  border-radius: 5px;
  margin-bottom: 6px;
  padding: 13.33px 20px 17.67px 20px;
}

.wisdom_tree_box .item-tree .head_portrait {
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border-radius: 50%;
}

.tree-info {
  color: #333333;
}

.tree-info .nickname {
  font-size: 15px;
}

.tree-info .time {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 10px;
}

.tree-info .content {
  font-size: 13px;
  margin: 20px 0 16px;
}

.tree-info .img_box {
  width: 100%;
  height: 82px;
}

.tree-info .img_box .user_img {
  width: 82px;
  height: 82px;
  border-radius: 5px;
  margin-right: 13px;
}

.tree-info .img_box .user_img:last-child {
  margin: 0;
}

//播放
.play_box {
  width: 100%;
  height: 30px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin-top: 10px;
  padding: 0 10px;
}

.play_box .play_icon {
  width: 18px;
  height: 18px;
}

.operation_box {
  margin-top: 17px;
}

.info_item {
  margin-right: 14px;

  &:last-child {
    margin-right: 0;
  }
}

.line {
  width: 0.33px;
  height: 19px;
  opacity: 0.3;
  background: #777777;
  margin: 0 6.67px;
}

.progress_bar {
  position: relative;
  width: 150px;
  height: 6px;
  background: #c2efff;
  border-radius: 3px;
}

.file_bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #0eaeff 0%, #0eaeff 100%);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.sliding_block {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 6px;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    #0eaeff;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0) inset;
  transition: left 0.1s linear;
}

.progress_time {
  opacity: 0.7;
  font-size: 11.33px;
  color: #333333;
  margin-left: 8px;
}

.tree-info .operation_box span {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
}

.tree-info .operation_box img {
  width: 13px;
  height: 13px;
  margin-right: 8px;
}

//评论
.comment_box {
  background: #ffffff;
  border-radius: 3.33px;
  padding: 17.67px 20px 13px 20px;
}

.comment_num {
  opacity: 0.5;
  font-size: 12px;
  margin-bottom: 16.67px;
  padding-left: 3px;
}

.comment_list {
}

.item_comment {
  display: flex;
  margin-bottom: 13px;
}

.item_comment:last-child {
  margin: 0;
}

.comment_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 13.33px;
}

.comment_info {
  flex: 1;
}

.comment_name {
  color: #00aeff;
  font-size: 10.67px;
  line-height: 10.67px;
}

.comment_txt {
  margin: 12.33px 0 9.33px;
  font-size: 13.33px;
  color: #555555;
}

.comment_time {
  font-size: 10.67px;
  line-height: 10.67px;
  color: #999999;
}

.no_data_txt {
  color: #555555;
  line-height: 10.67px;
  font-size: 10.67px;
  text-align: center;
  margin-top: 28px;
}

//底部操作
.footer_operate {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  height: 60px;
  background: #ffffff;
  color: #333333;
  padding: 0 17px;
}

.footer_operate input {
  width: 236.67px;
  height: 36.67px;
  border-radius: 6.67px;
  border: none;
  font-size: 14px;
  background: #f7f7f7;
  box-sizing: border-box;
  padding: 0 10px;
}

.colse_btn {
  width: 236.67px;
  height: 36.67px;
  line-height: 36.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    rgba(0, 0, 0, 0);
  border: 0.33px solid #aaa;
  border-radius: 6.67px;
  font-size: 14px;
}

.num_info {
  display: flex;
  align-items: center;
  text-align: center;
  margin-left: 23.33px;
}

.num_info img {
  width: 16.67px;
  height: 16.67px;
}

.num_info div {
  margin-top: 4px;
  font-size: 10.67px;
  line-height: 10px;
  color: #333333;
}

.num_info .apple {
  margin-right: 30px;
}
</style>
